<template>
	<view>
		<view class="m-form">
			<view class="m-form-item">
				<view class="m-form-item__label">
					<text>手机号</text>
				</view>
				<view class="m-form-item__input">
					<input type="text" :disabled="true" v-model="form.phone" placeholder="请输入" placeholder-style="color:#ADAAA5;">
				</view>
			</view>
			<view class="m-form-item">
				<view class="m-form-item__label">
					<text>新密码</text>
				</view>
				<view class="m-form-item__input">
					<input type="password" v-model="form.pass" placeholder="请输入"  placeholder-style="color:#ADAAA5;">
				</view>
			</view>
			<view class="m-form-item">
				<view class="m-form-item__label">
					<text>确认密码</text>
				</view>
				<view class="m-form-item__input">
					<input type="password" v-model="form.confirm_pass" placeholder="请输入"  placeholder-style="color:#ADAAA5;">
				</view>
			</view>
			<view class="m-form-item">
				<view class="m-form-item__label">
					<text>验证码</text>
				</view>
				<view class="m-form-item__input">
					<input type="text" maxlength="8" v-model="form.code"  placeholder-style="color:#ADAAA5;">
				</view>
				<view class="m-form-sms" @click="sendSmsFun">
					<text v-if="sendStatus">{{scends}}s</text>
					<text v-else>获取验证码</text>
				</view>
			</view>
		</view>
		<view class="m-btn" @click="submitFun">
			<text>确认</text>
		</view>
	</view>
</template>

<script>
	var _timer = null
	export default {
		data() {
			return {
				form:{
					phone:'',
					code:'',
					pass:'',
					confirm_pass:'',
				},
				scends:60,
				sendStatus:false,
			}
		},
		onLoad() {
			this.form.phone = uni.getStorageSync('user_info').username
		},
		methods: {
			sendSmsFun(){
				if(this.sendStatus) return false;
				uni.showLoading({
					title:'正在发送验证码'
				})
				this.$u.throttle(()=>{
					this.$http.getJson('users_sendSms',{phone:this.form.phone}).then(res=>{
						uni.hideLoading()
						if(res.code == 1){
							this.sendStatus = true
							this.scends  = 60
							_timer = setInterval(()=>{
								if(this.scends > 0){
									this.scends -= 1
								}else{
									clearInterval(_timer)
									this.sendStatus = false
								}
							},1000)
						}
					})
				},1000)
			},
			submitFun(){
				let tip = {
					phone:'请输入账号',
					pass:'请输入密码',
					confirm_pass:'请输入确认密码',
					code:'请输入验证码',
				}
				for(let i in this.form){
					if(!this.form[i]){
						return this.$m.msg(tip[i])
					}
				}
				if(this.form.pass != this.form.confirm_pass){
					return this.$m.msg('两次密码不一致')
				}
				this.$http.getJson('users_changePass',this.form).then(res=>{
					if(res.code == 1){
						this.$m.msg('修改成功',()=>{
							this.to_back()
						})
					}else{
						this.$m.msg(res.message)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
page{
	background: linear-gradient(132deg, #FDF6EE 0%, #F6F6F6 100%);
}
.title{
	font-size: 48rpx;
	color: #34302D;
	padding: 120rpx 45rpx 80rpx;
}
.m-form{
	width: 690rpx;
	margin-left: 30rpx;
	padding-top: 40rpx;
	.m-form-item{
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 30rpx 0 40rpx;
		margin-bottom: 40rpx;
		.m-form-item__label{
			font-size: 34rpx;
			color: #34302D;
		}
		.m-form-item__input{
			flex: 1;
			height: 100%;
			text-align: right;
			padding-left: 30rpx;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.m-form-sms{
			font-size: 34rpx;
			color: #D3A358;
			padding-left: 30rpx;
		}
	}
	.m-form-forget{
		font-size: 24rpx;
		color: #906F4C;
	}
}

.m-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 670rpx;
	height: 104rpx;
	background: #D3A358;
	box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(211,163,88,0.3);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 200rpx auto 0;
	font-size: 34rpx;
	color: #fff;
}
</style>
